<!DOCTYPE html>
<html>
    <head>
        <title>David's Second-hand Bookstore - Prior Purchases</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        
        <script type="text/javascript">
            // handle user's request to write a comment
            $(function() {
                $("td").on("click", function(event) {
                    var itemPressed = this.innerHTML;
                    
                    if (itemPressed === "Write Review") {
                        window.document.location.href="writereview.html";
                    }
                });
            });
    
            function navigateToMainPage() {
                window.document.location.href="main.html";
            }
        </script>
        
        <style type='text/css'>
            h1 {
                color : green;
                text-align: center;
            }
            
            span {
                color : green;
                font-weight : bold;
            }
            
            table {
                border : 1px solid black;
                border-spacing : 2px;
            }
            
            th, td {
                border : 1px solid black;
                padding : .2em .7em;
                text-align: left;
            }
            
            td.writeReview {
                color : green;
                font-weight : bold;
                text-decoration: underline;
            }
            
            a:hover, button:hover {
                color : red;
            }
            
            td.writeReview:hover {
                color : red;
                text-decoration: underline;
            }
            
        </style>
        
    </head>
    <body>
        <div>
            <h1>David's Second-hand Bookstore - Prior Purchases</h1>
            
            <table id="prior_purchases">
                <caption><span>Prior Purchases</span></caption>
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Author</th>
                        <th>Category</th>
                        <th>Price</th>
                        <th>Purchase Date</th>
                        <th>Review</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>A Tale of Two Cities</td>
                        <td>Charles Dickens</td>
                        <td>Fiction</td>
                        <td>$4.50</td>
                        <td>04/12/2011</td>
                        <td class="writeReview" id="purchase1">Write Review</td>
                    </tr>
                    <tr>
                        <td>The Scarlet Letter</td>
                        <td>Nathaniel Hawthorne</td>
                        <td>Fiction</td>
                        <td>$5.00</td>
                        <td>05/20/2012</td>
                        <td class="writeReview" id="purchase2">Write Review</td>
                    </tr>
                </tbody>    
            </table>    

            <button value="Return to Main page" onclick="navigateToMainPage();">Return to Main page</button>            
        </div>
    </body>
</html>
